<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
          list-style: none;  
        }
        form[input]{
        display: block       
        }
        .biaodan{
            text-align: center;
        }
        .biaodan li{
            margin-top: 20px;
        }
    </style> 
</head>
<body>
    <form class="biaodan">
        <li>Email<input type="email"></li>
        <li>URL<input type="url"></li>
        <li>日期<input type="date"></li>
        <li>时间<input type="time"></li>
        <li>月<input type="month"></li>
        <li>周<input type="week"></li>
        <li> 数字<input type="number"></li>
        <li>电话号码<input type="tel"></li>
        <li>搜索框<input type="search"></li>
        <li>颜色<input type="color"></li>     
     <button>提交</button>
    </form>
    <form action="">

        <input type="text" 
        required="required"  
         placeholder="请输入内容。。。"
          autofocus="autofocus" 
         autocapitalize="on">
         <!-- require表示不能为空；placenolder表示表单提示信息；autocomplete表示历史记录 -->
         <input type="file" name="" id=""  multiple="multiple"><br>
         <!-- file表示类型为可提交文件；multiple表示可以选择多个文件 -->
         <button>提交</button>
    </form>
</body>
</html>